<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 权限列表 -->
    <el-table :data="rolesList" border height="400">
      <el-table-column prop="id" label="权限ID"> </el-table-column>
      <el-table-column prop="authName" label="权限说明"> </el-table-column>
      <el-table-column prop="pid" label="权限父ID"> </el-table-column>
      <el-table-column prop="path" label="对应访问路径"> </el-table-column>
      <el-table-column prop="level" label="权限层级">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level === '0'">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level === '1'"
            >二级</el-tag
          >
          <el-tag type="danger" v-else>三级</el-tag>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      rolesList: [],

    };
  },
  methods: {

  },
  //钩子函数
  async mounted() {
    var { data } = await this.$axios.get("/rights/list");
    // console.log(data);
    this.rolesList = data.data;
  },
};
</script>

<style>
.el-dialog {
  width: 25vw;
}
.el-dialog__header {
  line-height: 0px;
}
.dialog-footer {
  line-height: 0px;
}
.has-gutter {
  line-height: 35px;
}
.el-row {
  line-height: 60px;
}
</style>